<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Watchlist</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        body { padding-top: 70px; }
        img { width: 20%; }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#score" data-toggle="tab">Score</a>
            </li>
            <li><a href="#wanplus" data-toggle="tab">Wanplus</a></li>
        </ul>
    </nav>
    <div class="container">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="score">
                <ul>
                    {% for news in news_list %}
                    <li>
                        <h3><a href="{{ news.url }}" target="_blank">{{ news.title }}</a></h3>
                        {% for comment in news.reply %}
                        <p><strong>{{ comment.nickname }}</strong>：{{ comment.content|safe }}</p>
                        {% endfor %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="tab-pane fade" id="wanplus">
                <ul>
                    {% for news_wp in news_list_wp %}
                    <li>
                        <h3><a href="{{ news_wp.url }}" target="_blank">{{ news_wp.time }} | {{ news_wp.title }}</a></h3>
                        {% for comment in news_wp.comment %}
                        <p><strong>{{ comment.user_nickname }}</strong>：{{ comment.content|safe }}</p>
                        {% endfor %}
                        <hr />
                        <p>{{ news_wp.text|safe }}</p>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <footer>
        <small>&copy; 2018 <a href="http://helloflask.com/tutorial">HelloFlask</a></small>
    </footer>
    <script>
    $(function () {
        $('#myTab li:eq(1) a').tab('show');
    });
</script>
</body>
</html>